<template>
  <div v-loading="isLoading"
       class="container">
    <el-card>

      <template #header>
        <el-form ref="searchForm"
                 inline>
          <el-form-item label="设备类型"
                        prop="news_type">
            <el-select v-model="searchForm.device_type"
                       placeholder="请选择设备类型">
              <el-option v-for="(oVal, oIdx) of type"
                         :key="oIdx"
                         v-bind="oVal" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-table :data="tableData"
                border>
        <el-table-column prop="deviceId"
                         label="设备序列号" />
        <el-table-column prop="companyName"
                         label="厂家名称" />
        <el-table-column prop="createTime"
                         label="安装时间" />

        <el-table-column prop="deviceTypeName"
                         label="设备类型名称" />
        <el-table-column prop="deviceModel"
                         label="设备型号" />
        <el-table-column prop="deviceModelName"
                         label="设备名称" />

        <el-table-column prop="fullOrgName"
                         label="组织全称" />

        <el-table-column prop="location"
                         label="设备位置">
          <template slot-scope="{ row }">
            <span>{{ row.location?row.location:'暂未录入' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orgName"
                         label="组织名称" />
        <el-table-column prop="online"
                         label="设备状态" />

      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination background
                     layout="total, sizes, pager, jumper"
                     :current-page="searchForm.page"
                     :page-sizes="[10, 20, 30, 50, 100]"
                     :page-size="searchForm.per_page"
                     :total="tableTotal"
                     @size-change="changeSize"
                     @current-change="changeCurrent" />
    </footer>

  </div>
</template>

<script>
import API from '@/api'
import { table, addOrEdit, status } from '@/utils/mixins'

export default {
  mixins: [table, addOrEdit, status],

  data: () => ({
    showAddOrEdit: false,
    isLoading: true,
    tableData: [],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 10, // 每页条数
      device_type: ''
    },
    type: [
      { label: '全部', value: '' },
      { label: '井盖监测传感器', value: 'manholecover-sensor' },
      { label: '烟感报警器', value: 'smoke-detector' }
    ]
  }),

  created () {
    this.getList()
  },

  methods: {
    // 获取列表
    getList () {
      this.isLoading = true
      API.getEquipmentList(this.searchForm)
        .then((res) => {
          const consultList = res.data.items.map(item => {
            return {
              deviceId: item.device_id,
              companyName: item.company_name,
              createTime: item.update_time,
              deviceTypeName: item.device_type_name,
              deviceModel: item.device_node,
              deviceModelName: item.device_model_name,
              location: item.location,
              orgName: item.org_name,
              fullOrgName: item.full_org_name,
              online: item.online == '1' ? '在线' : '离线'
            }
          })
          this.tableData = consultList
          this.tableTotal = res.data.total
        }).catch((err) => {
          this.tableData = []
          this.tableTotal = 0
        }).finally(() => {
          this.isLoading = false
        })
    },

    // 分页
    changeSize (val) {
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent (val) {
      this.searchForm.page = val
      this.getList()
    }

    //   // 编辑活动
    //   EditCommunity(id){
    //     this.builingForm.$id=id
    //     API.getCommunityDetail(id)
    //     .then(({data}) => {
    //       this.builingForm.title=data.title
    //       this.builingForm.organizer=data.organizer
    //       this.builingForm.organizer_addr=data.organizer_addr
    //       this.builingForm.sign_up_max=data.sign_up_max//最大报名人数
    //       this.builingForm.is_top=data.is_top//是否置顶
    //       this.builingForm.is_comment=data.is_comment//是否开启评论
    //       this.builingForm.comment_check=data.comment_check//是否需要审核评论
    //       this.builingForm.is_sign_up=data.is_sign_up//是否开启活动报名
    //       this.builingForm.sign_up_start_time=data.sign_up_start_time,//报名开始时间
    //       this.builingForm.sign_up_end_time=data.sign_up_end_time//报名结束时间
    //       this.builingForm.is_sign_in=data.is_sign_in//是否开启签到
    //       this.builingForm.sign_up_score=data.sign_up_score//报名积分
    //       this.builingForm.start_time=data.start_time//活动时间
    //       this.builingForm.end_time=data.end_time//结束时间
    //       this.builingForm.banner=data.banner//缩略图
    //       this.builingForm.sign_in_score=data.sign_in_score//签到积分
    //       this.builingForm.sign_out_score=data.sign_out_score//签退积分
    //       this.builingForm.activity_type_id=data.activity_type_id
    //       this.builingForm.content=data.content
    //     }).catch((err) => {
    //     }).finally(() =>{
    //       this.showAddOrEdit=true
    //     })
    //   },

    //   // 删除活动
    //   delCommunityById(id){
    //     let _that=this
    //     this.$confirm(`是否删除改条数据？`, "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //     })
    //     .then(() => {
    //       API.delCommunityAct(id)
    //       .then(({data}) => {
    //         this.$message.success("删除成功！");
    //       }).catch((err) => {
    //       }).finally(() =>{
    //         _that.getList()
    //       })
    //     })
    //     .catch(() => {
    //     });
    //   },

    //   // 创建活动
    //   addCommunity(){
    //     if(!this.builingForm.title.trim()) return this.$message.error("标题不可为空~~");
    //     if(!this.builingForm.organizer.trim()) return this.$message.error("主办方不可为空~~")
    //     if(!this.builingForm.organizer_addr.trim()) return this.$message.error("举办地不可为空~~")
    //     if(!this.builingForm.sign_up_start_time.trim()) return this.$message.error("报名开始时间不可为空~~")
    //     if(!this.builingForm.sign_up_end_time.trim()) return this.$message.error("报名结束时间不可为空~~")
    //     if(!this.builingForm.start_time.trim()) return this.$message.error("活动开始时间不可为空~~")
    //     if(!this.builingForm.end_time.trim()) return this.$message.error("活动结束不可为空~~")
    //     if(!this.builingForm.banner.trim()) return this.$message.error("活动图片不可为空~~")
    //     if(!this.builingForm.content.trim()) return this.$message.error("活动详情不可为空~~")

    //     let data={
    //       title:this.builingForm.title,
    //       organizer:this.builingForm.organizer,
    //       organizer_addr:this.builingForm.organizer_addr,
    //       sign_up_max:this.builingForm.sign_up_max,
    //       is_top:this.builingForm.is_top,
    //       is_comment:this.builingForm.is_comment,
    //       comment_check:this.builingForm.comment_check,
    //       is_sign_up:this.builingForm.is_sign_up,
    //       sign_up_start_time:this.builingForm.sign_up_start_time,
    //       sign_up_end_time:this.builingForm.sign_up_end_time,
    //       is_sign_in:this.builingForm.is_sign_in,
    //       sign_up_score:this.builingForm.sign_up_score,
    //       start_time:this.builingForm.start_time,
    //       end_time:this.builingForm.end_time,
    //       banner:this.builingForm.banner,
    //       sign_in_score:this.builingForm.sign_in_score,
    //       sign_out_score:this.builingForm.sign_out_score,
    //       activity_type_id:this.builingForm.activity_type_id,
    //       content:this.builingForm.content
    //     }

    //     if(this.builingForm.$id){
    //       let id=this.builingForm.$id
    //       API.editCommunityAct(id,data)
    //         .then(({data}) => {
    //           this.$message.success("编辑成功！");
    //         }).catch((err) => {
    //         }).finally(() =>{
    //           this.resetForm()
    //           this.getList()
    //         })
    //     }else{
    //        API.addCommunityAct(data)
    //         .then(({data}) => {
    //           this.$message.success("编辑成功！");
    //         }).catch((err) => {
    //         }).finally(() =>{
    //           this.resetForm()
    //           this.getList()
    //         })
    //     }
    //   },

    //   resetForm(){
    //     this.builingForm.title=""
    //     this.builingForm.organizer=""
    //     this.builingForm.organizer_addr=""
    //     this.builingForm.sign_up_max=30//最大报名人数
    //     this.builingForm.is_top=false//是否置顶
    //     this.builingForm.is_comment=true//是否开启评论
    //     this.builingForm.comment_check=false//是否需要审核评论
    //     this.builingForm.is_sign_up=true//是否开启活动报名
    //     this.builingForm.sign_up_start_time="",//报名开始时间
    //     this.builingForm.sign_up_end_time=""//报名结束时间
    //     this.builingForm.is_sign_in=true//是否开启签到
    //     this.builingForm.sign_up_score=0//报名积分
    //     this.builingForm.start_time=""//活动时间
    //     this.builingForm.end_time=""//结束时间
    //     this.builingForm.banner=""//缩略图
    //     this.builingForm.sign_in_score=0//签到积分
    //     this.builingForm.sign_out_score=0//签退积分
    //     this.builingForm.activity_type_id=1
    //     this.builingForm.content=""
    //     this.showAddOrEdit=false
    //   },

  }
}
</script>

  <style lang="scss" scoped>
::v-deep {
  .el-message-box {
    min-width: 400px;
  }
  .el-dialog {
    margin-top: 2vh !important;
  }
  .el-input .el-input__inner {
    border-radius: 4px !important;
  }
  .el-switch {
    transform: translateY(6px);
  }
  .el-message-box__message {
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;
  }
  .el-form-item__label {
    font-size: 16px !important;
  }
}
</style>

